import React from 'react';
import { Carousel } from 'antd';
import {  useNavigate } from 'react-router-dom';

import './banner.css';

const Banner = () => {
    const navigate = useNavigate();
    const goToProductDetails = (id) => {
        navigate(`/product/${id}`);
    };

    return (
        <Carousel autoplay className='banner'>
            <div>
                <img src='https://doc-fd.zol-img.com.cn/t_s640x2000/g7/M00/09/07/ChMkLGL9rd2INjxbAALenT0mfwAAAGliAIEbfIAAt61400.png' alt="Image 1" className='img' onClick={() => goToProductDetails(1)} />
            </div>
            <div>
                <img src='https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2023%2F0922%2Fe6e464fcj00s1df0y0013c000y700o4m.jpg&thumbnail=660x2147483647&quality=80&type=jpg' alt="Image 2" className='img' onClick={() => goToProductDetails(4)} />
            </div>
            <div>
                <img src='http://image20.it168.com/picshow/900x675/20120606/2012060609261529820.jpg' alt="Image 3" className='img' onClick={() => goToProductDetails(8)} />
            </div>
            <div>
                <img src='https://p2.ssl.qhimgs1.com/t01048af9d6660fe198.jpg' alt="Image 4" className='img' onClick={() => goToProductDetails(10)} />
            </div>
        </Carousel>
    );
};

export default Banner;